<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta name="format-detection" content="telephone=no" />
<title>适配01</title>
<style type="text/css">
html {
    font-size: calc(100vw / 3.75);
}
body{ margin: 0; padding: 0; min-width: 320px; max-width: 1080px; overflow-x: hidden; font-size: 16px;}
</style>
<style type="text/css">
/*商品列表*/
.list-mod{ display: flex; flex-wrap: wrap; padding: 10px 10px 0;}
.list-mod .list-item{ flex: 1; flex-basis: 48%; max-width: 49.4%; margin: 0 0 10px; }
.list-mod .list-item:nth-child(2n+1){ margin-right: 10px; }
.list-mod .list-img-box{ position: relative; overflow: hidden; padding-top: 100%; }
.list-mod .list-img{ position: absolute; top: 0; left: 0; width: 100%; height: auto; }
</style>
<style type="text/css">
.img-list-box .list-img1{ display: block; width: 1rem; height: 2rem;}
.img-list-box .list-img2{ display: block; width: 3rem; height: 4rem;}
</style>
</head>
<body>
<!-- 商品列表 -->
<div class="list-mod">
    <div class="list-item">
        <div class="list-img-box">
            <img class="list-img" src="https://img11.360buyimg.com/n2/s370x370_jfs/t1/184078/20/9125/123680/60c5f6a0E9dce5fa0/708f6786eef6a535.jpg!q70.jpg">
        </div>
        <div class="lisg-msg-box">
            <div class="list-msg1">11</div>
            <div class="list-msg2">22</div>
        </div>
    </div>
    <div class="list-item">
        <div class="list-img-box">
            <img class="list-img" src="https://gitee.com/static/images/logo-black.svg?t=158106664">
        </div>
        <div class="lisg-msg-box">
            <div class="list-msg1">11</div>
            <div class="list-msg1">22</div>
        </div>
    </div>
    <div class="list-item">
        <div class="list-img-box">
            <img class="list-img" src="//img12.360buyimg.com/n2/s308x308_jfs/t1/167042/21/13888/128572/60575afdE58f9c674/2ad8116d77fb6f14.jpg!q70.dpg">
        </div>
        <div class="lisg-msg-box">
            <div class="list-msg1">11</div>
            <div class="list-msg1">22</div>
        </div>
    </div>
</div>

<div class="img-list-box">
    <img class="list-img1" src="https://img11.360buyimg.com/n2/s370x370_jfs/t1/184078/20/9125/123680/60c5f6a0E9dce5fa0/708f6786eef6a535.jpg!q70.jpg">
    <img class="list-img2" src="https://img11.360buyimg.com/n2/s370x370_jfs/t1/184078/20/9125/123680/60c5f6a0E9dce5fa0/708f6786eef6a535.jpg!q70.jpg">
</div>
</body>
</html>
